<template>
	<div style="width: 100%;height: 100%; ">
		<slotcon>
			<template v-slot:com>
				<el-table :data="tableListArr" style="width: 100%">
					<el-table-column prop="workpieceName" label="零部件名称" width="110">
					</el-table-column>
					<el-table-column prop="workpieceNo" label="规格型号" width="150">
					</el-table-column>
					<el-table-column prop="workpieceImage" label="图片名称" width="165">
						<template slot-scope="scope">
							<div class="img">
								<img :src="docxurl + scope.row.workpieceImage" alt="">
							</div>
						</template>
					</el-table-column>
					<el-table-column prop="maintainDuration" label="寿命" width="135">
					</el-table-column>
					<el-table-column prop="maintainType" label="是否根据运行时间倒计时" width="191">
						<template slot-scope="scope" v-if="scope.row.workpieceId">
							{{ scope.row.maintainType == 1 ? '是' : "否" }}
						</template>
					</el-table-column>
					<el-table-column prop="remindPct" label="提醒保养时间百分比" width="151">
					</el-table-column>
					<el-table-column prop="remindMessage" label="提醒保养提示信息">
					</el-table-column>
					<el-table-column prop="warningPct" label="警告保养时间百分比" width="151">
					</el-table-column>
					<el-table-column prop="warningMessage" label="警告保养提示信息">
					</el-table-column>
					<el-table-column prop="maintainStepUrl" label="保养步骤文件地址">
						<template slot-scope="scope">
							<div @click="urlClick(scope.row.maintainStepUrl)">{{
								scope.row.maintainStepUrl }}</div>
						</template>
					</el-table-column>
					<el-table-column label="操作" width="100">
						<template slot-scope="scope">
							<span class="span" style="cursor: pointer" @click="main_enit_fun(scope.row)"
								v-if="scope.row.workpieceId">编辑</span>
							<span class="span" style="cursor: pointer" @click="main_del_fun(scope.row)"
								v-if="scope.row.workpieceId">删除</span>
						</template>
					</el-table-column>
				</el-table>
			</template>
		</slotcon>
		<div class="zzc1" v-show="isbool">
			<slotcon>
				<template v-slot:com>
					<div class="listzzc_2">
						<div class="listzzc_3">

							<div class="top">
								<div class="left">
									步骤
								</div>
								<div class="center">
									<img src="../../../../assets/imgx/message-bg.png" alt="">
									<div class="off1" @click="isbool = false">×</div>

								</div>
							</div>
							<div class="Bullbox" v-show="isbool">
								<ShowBetBs :item="docxurl1" />
							</div>
						</div>
					</div>
				</template>
			</slotcon>
		</div>
		<div v-show="isbool1" style="position: absolute;top: 30%; left: 30%;">
			<determineBox @delBtnFun="delBtnFun" @oneDelBtnFun="oneDelBtnFun" @errorBtnFun="errorBtnFun" />
		</div>
	</div>
</template>
<script>
import { delTableTrApi, editlistapi } from "@/api/SettingsApi/index.js"

export default {
	props: ["tableListArr"],
	components: {
		slotcon: () => import('@/components/SslotCom/index.vue'),
		ShowBetBs: () => import("@/components/ShowBulletBoxes/index.vue"),
		determineBox: () => import("@/components/determine/index.vue")
	},
	data() {
		return {
			tableau: null,
			docxurl1: '',
			isbool: false,
			isbool1: false,
			workpieceId: "",
			tableData: [{
				workpieceName: '',
				workpieceNo: '',
				maintainDuration: '',
				maintainType: '',
				remindPct: '',
				remindMessage: '',
				warningPct: '',
				warningMessage: '',
				maintainStepUrL: ' 弄',

			}]
		}
	},

	mounted() {

	},
	computed: {
		docxurl() {
			return window.location.origin + '/'
		}
	},
	methods: {
		urlClick(item) {
			this.isbool = !this.isbool;
			this.docxurl1 = this.docxurl + item
		},
		//删除接口
		main_del_fun(item) {
			this.isbool1 = true
			this.workpieceId = item.workpieceId
		},
		oneDelBtnFun() {
			this.isbool1 = false

		}, errorBtnFun() {
			this.isbool1 = false

		},
		delBtnFun() {
			delTableTrApi({
				workpieceId: this.workpieceId
			}).then(res => {
				console.log(res);


				if (res.code !== 200) {
					this.$emit("errorFun", res)
				} else {
					this.$emit("delRefresh")
					this.isbool1 = false
				}
			})

		},

		main_enit_fun(item) {
			this.$emit("child_TalBe_Fun", item)

		},

	},
}
</script>
<style lang="less">
.el-table .el-table__cell {
	padding: 0px !important;
}

.el-pagination {

	.btn-next,
	.btn-prev {
		border: 0px !important;
	}

}

.vue-office-docx {
	/deep/.vue-office-docx-main {
		height: 100% !important;

		.docx-wrapper {
			height: 100% !important;
			padding: 0px !important;
			padding-bottom: 0px;
			align-items: flex-start !important;

		}

	}
}

.zzc1 {
	position: absolute;
	top: 11%;
	left: 13%;
	background: red;
	width: 800px;
	height: 400px;
	background: rgba(16, 45, 92, 0.5) linear-gradient(180deg, rgba(16, 45, 92, 0.5) 0%, #0C2041 0%, rgba(16, 45, 92, 0.5) 0%);
	box-shadow: inset 0px 0px 1600px 0px #010816;
	background: #091123;
	border: 1px solid #113D71;
	overflow: auto;

	.listzzc_2 {
		width: 100%;
		height: 100%;

		background: rgb(3 55 139 / 36%);

		.listzzc_3 {
			width: 100%;
			height: 100%;
			box-shadow: inset 0px 0px 54px 0px #0d3eb8b5;
			display: flex;
			flex-direction: column;

			.top {
				width: 100%;
				height: 29px;
				position: relative;
				display: flex;
				color: white;

				.left {
					width: 60px;
					height: 29px;

					font-size: 16px;

					text-align: center;
					line-height: 29px;
				}

				.center {
					width: 95%;
					height: 100%;
					position: relative;

					img {
						width: 100%;
						height: 100%;
						position: absolute;
					}

					.off1 {
						width: 18px;
						height: 18px;
						text-align: right;
						font-size: 36px;
						font-weight: bold;
						color: #0E66B3;
						z-index: 99;
						cursor: pointer;
						line-height: 22px;
						position: absolute;
						right: 15px;
					}
				}

			}

			.Bullbox {
				width: 100%;
				height: 100%;
				overflow: auto;


			}
		}
	}
}

.excel-view-container {
	width: 100% !important;

	height: 100% !important;
}

.zzc1 .listzzc_2 .listzzc_3 .button .el-timeline .el-timeline-item[data-v-5fc3543c] {
	width: 100%;
	height: 145px;
}

.el-table__row {
	height: 44px !important;

}



/deep/ table {
	max-width: 100% !important;
	border-collapse: collapse !important;
	border-spacing: 0 !important;
	text-align: center !important;
	border: 0px !important;
	font-size: 16px;

}

.el-table {
	width: 100% !important;

	height: 100%;
	overflow: auto;

}

.el-table .cell {
	width: 100% !important;
	height: 100% !important;
	padding: 0px;
}



/**整体样式 */
/deep/ .excel-view-container {
	background-color: #FFFFFF;
}

/**标题样式 */
/deep/ .class4Title {
	font-size: 22px !important;
	font-weight: bold !important;
	padding: 10px !important;
}

/**表格表头样式 */
/deep/ .class4TableTh {
	/* font-size: 14px !important; */
	font-weight: bold !important;
	padding: 2px !important;
	background-color: #EFE4B0 !important;
}

.el-table_7_column_67 /deep/ .cell {
	height: 100px !important;
}

.el-table tbody tr:hover>td {
	background-color: unset !important //修改成自己想要的颜色即可
}

.el-table--fit {
	border-bottom: none;
}

.el-table::before {
	background-color: unset !important //修改成自己想要的颜色即可

}

.el-table thead {



	tr {
		color: white;
		font-size: 13px;
		font-family: SourceHanSansCN-Regular, SourceHanSansCN;
		font-weight: 400;

	}
}

.el-table tbody tr {
	height: 110px !important;
}

.el-table {
	background: linear-gradient(60deg, #021130 0%, #010D2A 100%);
	color: white;



	tr {
		background: linear-gradient(60deg, #021130 0%, #010D2A 100%);
	}
}




.el-table th.el-table__cell {

	background: rgba(11, 111, 189, 0.48);
	text-align: center;
	color: #fff;
	// border: 1px solid #00469C;
}

.el-table td.el-table__cell,
.el-table th.el-table__cell.is-leaf {
	border: 1px solid rgb(4 123 181 / 52%);
}

.el-table__footer-wrapper,
.el-table__header-wrapper {
	background-color: #2B7BB5;
}

.el-table--enable-row-transition .el-table__body td.el-table__cell {
	text-align: center;
	color: white;
}

.el-table__row:nth-child(even) {
	background: rgba(11, 111, 189, 0.22) !important;


}

.el-table--enable-row-transition .el-table__body td.el-table__cell {
	// border: 1px solid #2B7FAF;

}

.el-table tr {
	height: 44px !important;
}

.cell {

	width: 100% !important;
	height: 100% !important;
}

.img {
	height: 90px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;

	img {
		max-width: 100%;
		max-height: 100%;
	}
}

.span {
	display: inline-block;
	height: 40px;
	padding: 10px;
}
</style>